<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="icon" href="./logo.svg" />
    <meta name="author" content="小浪" />
    <meta
      name="keywords"
      content="it浪子,文章目录生成,TOC,侧边栏目录的滚动效果"
    />
    <meta
      name="description"
      content="为文章动态生成侧边栏目录以及静态侧边栏目录的滚动效果"
    />
    <meta name="robots" content="all" />
    <meta name="renderer" content="webkit" />
    <title>TOC 文章目录生成</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.1.0/github-markdown.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.26.0/themes/prism-okaidia.min.css">

    <style>
      html {
        font-size: 16px;
      }
      body {
        height: 100vh;
      }

      @media (min-width: 576px) {
        .container {
          max-width: 540px;
        }
      }

      @media (min-width: 768px) {
        .container {
          max-width: 720px;
        }
      }

      @media (min-width: 992px) {
        .container {
          max-width: 960px;
        }
      }

      @media (min-width: 1200px) {
        .container {
          max-width: 1140px;
        }
      }

      .container {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
      }

      .row {
        display: flex;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
        position: relative;
      }

      .col-sm-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
      }

      .col-sm-9 {
        flex: 0 0 75%;
        max-width: 75%;
        padding-left: 15px;
        padding-right: 15px;
      }

      .col-sm-12 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
      }

      .col-sm-3 {
        flex: 0 0 25%;
        max-width: 25%;
      }

      .col-sm-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
      }

      .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      header {
        background: #00a3e8;
        color: #fff;
        font-size: 1.25rem;
        padding: 0.5rem;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 10;
      }

      header .nav {
        display: flex;
        align-items: center;
      }

      .logo > img {
        height: 60px;
      }

      .github {
        margin-left: auto !important;
      }

      code.code {
        color: #333;
        background: #eee;
        font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
        padding: 3px 10px;
        border-radius: 4px;
        font-size: 12px;
      }

      pre {
        background: #ccc;
        border-radius: 4px;
        color: #333;
        padding: 5px 10px;
        margin: 5px 0;
      }

      h1,
      h2,
      h3,
      h4,
      h5 {
        margin-bottom: 10px;
      }

      p {
        margin: 15px 0;
      }

      p.api {
        font-weight: bold;
      }

      strong {
        font-size: 15px;
      }

      small {
        color: #555;
        padding-left: 10px;
      }

      .actions {
        position: fixed;
        top: 93px;
        right: 20px;
        z-index: 5;
      }

      .actions button {
        background: #00a3e8;
        color: #fff;
        border: 0;
        padding: 10px 15px;
        cursor: pointer;
      }

      footer {
        background: #343a40;
        color: #999;
        padding: 20px 0;
        font-size: 13px;
      }

      footer p {
        margin: 0;
      }

      footer a {
        color: #fff;
        text-decoration: none;
      }

      footer a:hover {
        color: #ccc;
      }

      footer .container {
        text-align: center;
      }

      .blockquote-footer {
        display: block;
        font-size: 80%;
        color: #6c757d;
      }

      .scroll {
        position: relative;
        max-height: 500px;
        overflow: auto;
      }
      .bitoc {
        /* max-height: calc(100vh - 500px); */
        max-height: 20rem;
      }
      .bitoc-fixed {
        position: fixed !important;
        top: 86px;
        max-width: 285px;
      }
      #scroll-content.max-height {
        max-height: 500px;
        overflow-y: auto;
      }
      #main-container {
        margin-top: 83px;
        min-height: calc(100vh - 422px);
      }
    </style>
  </head>

  <body>
    <header>
      <div class="container">
        <div class="nav">
          <div class="logo">
            <img src="./logo.svg" />
          </div>
          <div class="github">
            <a href="https://github.com/itlangzi" target="_blank">
              <img src="./github.svg" />
            </a>
          </div>
        </div>
      </div>
    </header>

    <div class="container" id="main-container">
      <div class="actions" style="text-align: right">
        <button onclick="togger()">显示/隐藏</button>
      </div>
      <div style="height: 20rem; width: 100%;"></div>
      <div class="row">
        <div class="col-sm-9 normal" id="scroll">
          <div id="scroll-content">
            <div id="article-content" class="content">
              <!-- content -->
              <h1>toc-helper</h1>
      <p><code>TocHelper</code> 是一款给文章自动生成目录及侧边栏目录滚动特效的插件</p>
      <blockquote>
      <p>v1 <a href="https://github.com/itlangzi/toc-helper/blob/v1/README.md" target="_blank" rel="noopener noreferrer" data-href="https://github.com/itlangzi/toc-helper/blob/v1/README.md">入口</a></p>
      </blockquote>
      <blockquote>
      <p>预览 <a href="http://itlangzi.com/s/toc-helper.html" target="_blank" rel="noopener noreferrer" data-href="http://10.10.1.100:8080/s/1485498749949054976.html#bitoc-heading-12"><code>Demo</code></a></p>
      </blockquote>
      <h1>一、 v2 特性</h1>
      <ul>
      <li>简介, 减少了大量的配置, 去除不必要的API, 仅需要引入一个js文件</li>
      <li>性能优化, 联动滚动更加流畅, 自动停靠顶部更加精准</li>
      <li>目录支持自动展开、折叠</li>
      <li>自动定位, 初始目录高亮位置自动识别</li>
      <li>支持显示、隐藏、媒体查询宽度变化</li>
      <li>支持非H标签</li>
      <li>支持内容局部滚动（非<code>body</code>, 内容<code>div</code>滚动）</li>
      <li>支持 <code>React、Vue、Svelte</code></li>
      </ul>
      <h1>二、 使用</h1>
      <h2>浏览器</h2>
      <ol>
      <li>引入JS</li>
      </ol>
      <pre class="language-js"><code class="language-js"><span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"lib/umd/index.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
      </code></pre>
      <blockquote>
      <p><code>esmodule</code> 引入 <code>lib/es/index.js</code></p>
      </blockquote>
      <ol start="2">
      <li>使用</li>
      </ol>
      <pre class="language-js"><code class="language-js"><span class="token keyword">new</span> <span class="token class-name">TocHelper</span><span class="token punctuation">(</span>el <span class="token punctuation">[</span><span class="token punctuation">,</span> options<span class="token punctuation">]</span><span class="token punctuation">)</span>
      </code></pre>
      <h2>npm方式</h2>
      <h3>1. 安装</h3>
      <pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> toc-helper --save 
      <span class="token comment"># 或者</span>
      <span class="token function">yarn</span> <span class="token function">add</span> toc-helper
      </code></pre>
      <h3>2. 使用</h3>
      <h4>2.1 <code>require</code></h4>
      <pre class="language-js"><code class="language-js"><span class="token keyword">const</span> TocHelper <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'toc-helper'</span><span class="token punctuation">)</span>
      <span class="token keyword">new</span> <span class="token class-name">TocHelper</span><span class="token punctuation">(</span>el <span class="token punctuation">[</span><span class="token punctuation">,</span> options<span class="token punctuation">]</span><span class="token punctuation">)</span>
      </code></pre>
      <h4>2.2 <code>import</code></h4>
      <pre class="language-js"><code class="language-js"><span class="token keyword">import</span> TocHelper <span class="token keyword">from</span> <span class="token string">'toc-helper'</span>
      <span class="token keyword">new</span> <span class="token class-name">TocHelper</span><span class="token punctuation">(</span>el <span class="token punctuation">[</span><span class="token punctuation">,</span> options<span class="token punctuation">]</span><span class="token punctuation">)</span>
      </code></pre>
      <h4>2.3 <code>React</code> 示例</h4>
      <h5>2.3.1 普通模式</h5>
      <pre class="language-js"><code class="language-js"><span class="token keyword">import</span> TocHelper <span class="token keyword">from</span> <span class="token string">'toc-helper'</span>
      <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>PureComponent</span><span class="token punctuation">{</span>
        <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
          <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>ref <span class="token operator">=</span> <span class="token keyword">null</span>
        <span class="token punctuation">}</span>
        <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
          <span class="token keyword">new</span> <span class="token class-name">TocHelper</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>ref <span class="token punctuation">[</span><span class="token punctuation">,</span> options<span class="token punctuation">]</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
          <span class="token keyword">return</span> <span class="token operator">&lt;</span>div ref<span class="token operator">=</span><span class="token punctuation">{</span><span class="token parameter">ref</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ref <span class="token operator">=</span> ref<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span> 
      </code></pre>
      <h5>2.3.2 Hook 模式</h5>
      <pre class="language-js"><code class="language-js"><span class="token keyword">import</span> TocHelper <span class="token keyword">from</span> <span class="token string">'toc-helper'</span>
      <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
       <span class="token keyword">const</span> ref <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
       <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
         <span class="token keyword">new</span> <span class="token class-name">TocHelper</span><span class="token punctuation">(</span>ref <span class="token punctuation">[</span><span class="token punctuation">,</span> options<span class="token punctuation">]</span><span class="token punctuation">)</span>
       <span class="token punctuation">}</span><span class="token punctuation">)</span>
       <span class="token keyword">return</span> <span class="token operator">&lt;</span>div ref<span class="token operator">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
      <span class="token punctuation">}</span>
      </code></pre>
      <h4>2.4 <code>vue</code> 示例 <code>v3</code></h4>
      <pre class="language-js"><code class="language-js"><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
        <span class="token keyword">import</span> TocHelper <span class="token keyword">from</span> <span class="token string">'toc-helper'</span>
        <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> <span class="token punctuation">{</span> emit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">const</span> toc <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token keyword">let</span> helper <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
          <span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            helper <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">TocHelper</span><span class="token punctuation">(</span>toc <span class="token punctuation">[</span><span class="token punctuation">,</span> options<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      
          <span class="token keyword">return</span> <span class="token punctuation">{</span> toc <span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div ref<span class="token operator">=</span><span class="token string">"toc"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
      </code></pre>
      <h4>2.5 <code>svelte</code> 示例</h4>
      <pre class="language-js"><code class="language-js"><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
        <span class="token keyword">import</span> TocHelper <span class="token keyword">from</span> <span class="token string">'toc-helper'</span>
        <span class="token keyword">let</span> toc <span class="token operator">=</span> <span class="token keyword">null</span>
        <span class="token keyword">let</span> helper <span class="token operator">=</span> <span class="token keyword">null</span>
        <span class="token function">onMount</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
          helper <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">TocHelper</span><span class="token punctuation">(</span>toc <span class="token punctuation">[</span><span class="token punctuation">,</span> options<span class="token punctuation">]</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>div bind<span class="token operator">:</span><span class="token keyword">this</span><span class="token operator">=</span><span class="token punctuation">{</span>toc<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">&gt;</span>
      </code></pre>
      <h1>三、API</h1>
      <h2><strong><code>TocHelper(selector [, options])</code></strong></h2>
      <blockquote>
      <p>构造器方法, 只能通过 new 创建实例</p>
      </blockquote>
      <p><strong>selector</strong><br>
      类型：<code>string</code> | <code>HTMLElement</code><br>
      默认值：<code>无</code><br>
      必须：<code>是</code></p>
      <blockquote>
      <p>selector 若为字符串, 则必须是选择器, 切可以通过<code>ducument.querySelector</code>获取相应的元素, 否则将报错</p>
      </blockquote>
      <p><strong>options</strong><br>
      类型：<code>object</code> | <code>undefined</code><br>
      默认值：<code>无</code><br>
      必须：<code>可选</code></p>
      <h2><strong><code>resetHeadings</code></strong></h2>
      <blockquote>
      <p>无参</p>
      </blockquote>
      <p>实例方法, 重新解析 <code>heading</code>, 若数据是异步获取, 该方法会有用</p>
      <h2><strong><code>isEmpty</code></strong></h2>
      <blockquote>
      <p>无参</p>
      </blockquote>
      <p>实例方法, 判断是否有 <code>heading</code></p>
      <h1>四、配置</h1>
      <h2><strong><code>options</code></strong></h2>
      <h3>1. <code>contentSelector</code></h3>
      <p>类型: <code>string</code> | <code>HTMLElement</code><br>
      默认值: <code>document.body</code></p>
      <blockquote>
      <p>若为字符串, 则必须是选择器, 切可以通过<code>ducument.querySelector</code>获取相应的元素</p>
      </blockquote>
      <p>通过该选择器解析内容中的目录元素</p>
      <h3>2. <code>scrollSelector</code></h3>
      <p>类型: <code>string</code> | <code>HTMLElement</code><br>
      默认值: <code>document.body</code></p>
      <blockquote>
      <p>若为字符串, 则必须是选择器, 切可以通过<code>ducument.querySelector</code>获取相应的元素</p>
      </blockquote>
      <p>滚动元素的选择器; 若内容不是整个文档, 且滚动也不是整个文档, 是局部内容的局部咕哝则需要指定该值, 否则目录无法同步滚动</p>
      <h3>3. <code>fixedSelector</code></h3>
      <p>类型: <code>string</code> | <code>HTMLElement</code><br>
      默认值: <code>目录本身</code></p>
      <blockquote>
      <p>若为字符串, 则必须是选择器, 切可以通过<code>ducument.querySelector</code>获取相应的元素</p>
      </blockquote>
      <p>文档滚动到该选择器元素的位置就停靠在顶部</p>
      <h3>4. <code>headingSelector</code></h3>
      <p>类型: <code>string</code><br>
      默认值: <code>h1, h2, h3, h4, h5, h6</code></p>
      <p>内容元素通过该选择器解析出所有的目录</p>
      <blockquote>
      <ol>
      <li>可以不是<code>h</code>标签, 但是标签要提供属性 <code>data-level</code> 已指定当前目录的层级</li>
      <li>具体用法是<code>[contentSelector].querySelectorAll(headingSelector)</code>, 所以需要正确配置 <code>contentSelector</code>和<code>headingSelector</code>, 否则解析的目录将会为空</li>
      </ol>
      </blockquote>
      <h3>5. <code>collapsedLevel</code></h3>
      <p>类型: <code>number</code><br>
      默认值: <code>3</code></p>
      <p>该层级以上的目录将默认折叠(隐藏), 当内容滚动该位置对应的目录或点击后都将自动展开, 之后又将折叠</p>
      <h3>6. <code>idPrefix</code></h3>
      <p>类型: <code>string</code><br>
      默认值: <code>bitoc-heading-</code></p>
      <p>目录ID的前缀</p>
      <blockquote>
      <p>仅影响目录本身, 不影响内容</p>
      </blockquote>
      <h3>7. <code>levelClassPrefix</code></h3>
      <p>类型: <code>string</code><br>
      默认值: <code>bitoc-ml-</code></p>
      <p>层级偏移样式前缀, 默认二级目录偏移<code>1rem</code>, 三级目录偏移<code>2rem</code>, 以此累加; 可用样式更改, 默认样式名</p>
      <ul>
      <li>一级目录: bitoc-ml-1</li>
      <li>二级目录: bitoc-ml-2</li>
      <li>三级目录: bitoc-ml-3</li>
      <li>四级目录: bitoc-ml-4</li>
      <li>五级目录: bitoc-ml-5</li>
      <li>六级目录: bitoc-ml-6</li>
      </ul>
      <h3>8. <code>scrollDuration</code></h3>
      <p>类型: <code>number</code><br>
      默认值: <code>200</code></p>
      <p>默认支持滚动动画, 动画的持续时间由该值控制</p>
      <h3>9. <code>scrollOffset</code></h3>
      <p>类型: <code>number</code><br>
      默认值: <code>0</code></p>
      <p>滚动偏移量</p>
      <blockquote>
      <p>该值只针对内容, 点击目录后内容会自动滚动到先对应的位置; 内若容顶部有fixed或absolute定位, 滚动的位置将会有偏差, 解决的方案有两种, 假如<code>fixed</code>定位元素的高度为 <code>64px</code>:</p>
      </blockquote>
      <ol>
      <li>使用<code>css</code>将所有的标题<code>padding-top</code>等于头部的高, <code>margin-top</code>等于头部高的相反值; 示例<code>css</code>代码如下</li>
      </ol>
      <pre class="language-css"><code class="language-css"><span class="token selector">[contentSelector] h1,
      [contentSelector] h2,
      [contentSelector] h3,
      [contentSelector] h4,
      [contentSelector] h5,
      [contentSelector] h6</span><span class="token punctuation">{</span>
        <span class="token property">margin-top</span><span class="token punctuation">:</span> -64px<span class="token punctuation">;</span>
        <span class="token property">padding-top</span><span class="token punctuation">:</span> 64px<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      </code></pre>
      <ol start="2">
      <li>配置该值为 <code>64</code>, 不要加单位</li>
      </ol>
      <ul>
      <li><strong>注意</strong>: 以上两种方案只能<code>二选其一</code></li>
      </ul>
      <h3>10. <code>fixedOffset</code></h3>
      <p>类型: <code>number</code> | <code>false</code><br>
      默认值: 动态计算</p>
      <p>目录滚动到该位置将自动停靠在顶部</p>
      <ol>
      <li>该值默认通过目录元素计算获取, 若初始目录处于隐藏且整个文档有滚动的话, 自动计算的值将会有很大的偏差, 所以尽量要指定该值</li>
      <li>若顶部有<code>fixed</code>布局的元素, 则需要减去<code>fixed</code>布局元素的高度, 否则可能会有较大的抖动</li>
      <li>若该值为<code>false</code>, 将禁用停靠功能</li>
      </ol>
      <h3>11. <code>fixedClassName</code></h3>
      <p>类型: <code>string</code><br>
      默认值: <code>.bitoc-fixed</code></p>
      <p>目录停靠顶部样式, 默认样式</p>
      <pre class="language-css"><code class="language-css"><span class="token selector">.bitoc-fixed</span><span class="token punctuation">{</span>
        <span class="token property">position</span><span class="token punctuation">:</span> fixed <span class="token important">!important</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      </code></pre>
      <h1>五、其他注意</h1>
      <ol>
      <li>目录停靠默认没有指定<code>top</code>的偏移量, 需要添加相应的样式; 比如; 加入顶部有<code>fixed</code>布局元素, 且高度为<code>64px</code>,则需要添加样式</li>
      </ol>
      <pre class="language-css"><code class="language-css"><span class="token selector">.bitoc-fixed</span><span class="token punctuation">{</span>
        <span class="token property">top</span><span class="token punctuation">:</span> 3.875rem<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      </code></pre>
      <ol start="2">
      <li>目录本身并有宽度限制停靠后, 整个目录将会被内容撑开, 所以需要限制停靠后的目录宽度, 示例:</li>
      </ol>
      <pre class="language-css"><code class="language-css"> <span class="token selector">.bitoc-fixed</span> <span class="token punctuation">{</span>
          <span class="token property">max-width</span><span class="token punctuation">:</span> 27rem<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      </code></pre>
      <p>使其支持响应式</p>
      <pre class="language-css"><code class="language-css"> <span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 1024px<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 1216px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
          <span class="token selector">#toc-box.bitoc-fixed</span> <span class="token punctuation">{</span>
            <span class="token property">max-width</span><span class="token punctuation">:</span> 19rem<span class="token punctuation">;</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      </code></pre>
      <ol start="3">
      <li>目录本身没有高度限制, 停靠后目录可能会超出, 需要添加高度限制, 若目录达到该限制将自动滚动, 无需添加其他样式, 示例</li>
      </ol>
      <pre class="language-css"><code class="language-css"><span class="token selector">.bitoc</span> <span class="token punctuation">{</span>
        <span class="token property">max-height</span><span class="token punctuation">: </span>20rem<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      </code></pre>
      <h1>六、开发</h1>
      <pre class="language-bash"><code class="language-bash"><span class="token function">git</span> clone https://github.com/itlangzi/toc-helper
      <span class="token builtin class-name">cd</span> toc-helper
      </code></pre>
      <p>开发环境</p>
      <pre class="language-bash"><code class="language-bash"><span class="token function">yarn</span> dev --open
      </code></pre>
      <blockquote>
      <p>在浏览访问 http://localhost:3000/demo</p>
      </blockquote>
      <p>构建</p>
      <pre class="language-bash"><code class="language-bash"><span class="token function">yarn</span> build
      </code></pre>
      
            </div>
          </div>
        </div>

        <div class="col-sm-3" id="toc-container">
          <div id="toc-wrap">
            <div>目录</div>
            <div class="toc" id="toc"></div>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <div class="container">
        <blockquote class="blockquote">
          <p class="mb-0">
            Copyright © 2019-2020
            <a href="http://www.itlangzi.com" target="_blank">it浪子技术博客</a>
            版权所有
          </p>
          <div class="blockquote-footer">
            Design By <cite title="小浪"> 小浪 </cite>
          </div>
        </blockquote>
      </div>
    </footer>
    <script>
      function togger() {
        const toc = document.getElementById("toc");
        if (toc.style.display == "none") {
          toc.style.display = "block";
        } else {
          toc.style.display = "none";
        }
      }
    </script>
    <script type="module" src="./index.js"></script>
  </body>
</html>
